<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>精灵旅社</title>
  <link rel="stylesheet" href="./last.css">
</head>

<body>
  <header>
    <a href="#" class="logo">HouEr</a>
    <ul>
      <li><a href="./概要.html">概要</a></li>
      <li><a href="./人物介绍.html">人物介绍</a></li>
      <li><a href="./幕后花絮.html">幕后花絮</a></li>
      <li><a href="#" class="active">台词</a></li>
    </ul>
  </header>
  <div class="emptybox">
    <div class="card">
      <p class="title">Hotel Transylvania</p>
      <div class="card-hidden">
        <h3 class="title-in">Dialogue</h3>
        <p>
          "Human, monster, unicorn, as long as you are happy."
          <br>
          "No one will ever harm you as long as I'm here, my little devil dog."
          <br>
          "Maybe you've let humans into your hotel, Dad. But I don't think you've let them into your heart."
        </p>
        <a class="button">Button</a>
      </div>
    </div>
    <div class="card-border"></div>
  </div>
  <div class="emptybox">
    <div class="card">
      <p class="title">Hotel Transylvania</p>
      <div class="card-hidden">
        <h3 class="title-in">Dialogue</h3>
        <p>"I always thought the worst thing ever would be seeing you go. But the worst is seeing you unhappy."
          <br>
          "I don't have a dream now, just like you."
          <br>
          "They are getting fatter and trying to overwhelm us."
        </p>
        <a class="button">Button</a>
      </div>
    </div>
    <div class="card-border"></div>
  </div>
  <div class="scrollbox">
    <div class="scrollbox_container">
      <div class="scrollbox_container_card">悬停我</div>
      <div class="scrollbox_container_card">悬停我</div>
      <div class="scrollbox_container_card">悬停我</div>
    </div>
  </div>
  <div class="emptybox">
    <div class="card">
      <p class="title">Hotel Transylvania</p>
      <div class="card-hidden">
        <h3 class="title-in">Dialogue</h3>
        <p>
          "The only way to do great work is to love what you do."
          <br>
          "Don't watch the clock; do what it does. Keep going."
          <br>
          "Believe you can and you're halfway there."
        </p>
        <a class="button">Button</a>
      </div>
    </div>
    <div class="card-border"></div>
  </div>
  <div class="emptybox">
    <div class="card">
      <p class="title">Hotel Transylvania</p>
      <div class="card-hidden">
        <h3 class="title-in">Dialogue</h3>
        <p>
          "You are perfect just the way you are."
           <br>
           If you only see the worst in things, you'll missthe best part. You just have to look for it.
           <br>
           "Success is not final, failure is not fatal: It is the courage to continue that counts."
        </p>
        <a class="button">Button</a>
      </div>
    </div>
    <div class="card-border"></div>
  </div>
</body>
<script>
  const scrollbox = {
    container: document.querySelector(".scrollbox_container"),
    cards: [...document.querySelectorAll(".scrollbox_container_card")],
    trigger_distance: 0,
    border_distance: 0,
    distance: 0,
    resize() {
      let _scrollbox = document.querySelector(".scrollbox");
      _scrollbox.style.height = `${this.container.offsetWidth}px`;
      this.trigger_distance = _scrollbox.offsetTop;
      this.border_distance = _scrollbox.offsetTop + _scrollbox.offsetHeight - innerHeight;
    },
    move() {
      if (scrollY >= this.trigger_distance &&
        scrollY <= this.border_distance) {
        this.distance = scrollY - this.trigger_distance;
        this.container.style.transform = `translateY(${this.distance}px)`;
        let distance_x =
          this.distance / (this.border_distance - this.trigger_distance) *
          (this.container.offsetWidth - innerWidth);
        for (let i = 0; i < this.cards.length; i++) {
          this.cards[i].style.transform = `translateX(${-distance_x}px)`;
        };
      };
    }
  };
  scrollbox.resize();
  window.addEventListener("resize", () => {
    scrollbox.resize();
  });
  window.addEventListener("scroll", () => {
    scrollbox.move();
  });
</script>

</html>